<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="renderer" content="webkit">
    <title th:text="${title}"></title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <script th:src="@{/links/polyfill.min.js}"></script>
    <script th:src="@{/links/axios/axios.min.js}"></script>
    <script th:src="@{/links/vue/vue.min.js}"></script>
    <script th:src="@{/links/element-ui/index.js}"></script>
    <script th:src="@{/js/HttpApi.js}"></script>
    <link th:href="@{/links/element-ui/theme/index.css}" rel="stylesheet"/>
    <link th:href="@{/css/default.css}" rel="stylesheet"/>
    <script th:src="@{/links/dayjs.min.js}"></script>
    <style>
        body {
            height: 100%;
            width: 100%;
            background-color: rgb(0,156,222);
        }

        a {
            text-decoration: none;
        }

        .login-wrap {
            position: relative;
            top: 50%;
            left: 50%;
            margin-top: -270px;
            margin-left: -480px;
            width: 960px;
            height: 540px;
            background-image: url("/img/frontground.png");
            background-size: cover;
        }

        .swipe-container  {
            position: relative;
            width: 320px;
            height: 450px;
            left: 530px;
            top: 90px;
            overflow: hidden;
        }

        .login-btn button {
            width: 100%;
            margin-bottom: 10px;
            background-color: #5FB878;
            border-color: #5FB878;
            font-size: 18px;
        }


        .btn_login .el-button.el-button--primary {
            width: 100%;
        }

        .btn_login .el-button.el-button--primary i{
            font-size: 14px;
        }

        .btn_login .el-button.el-button--primary span{
            font-size: 14px;
        }

        .swipe-content {
            display: flex;
        }

        .swipe-item {
            width: 100%;
            transition: transform 0.5s ease-in-out;
            transform: translateX(0);
            position: absolute;
        }

        .slide-login {
            transform: translateX(-100%);
        }


        .slide-organ {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
<div class="login-wrap" id="app">
    <div class="swipe-container">
        <div class="swipe-content">
            <div class="swipe-item"  :key="0" :class="{'slide-login':activeIndex === 1}">
                <div>
                    <div style="font-size: 20pt;font-weight: bolder;color: rgb(0,156,222);letter-spacing:5px;" th:text="${projectName}"></div>
                    <div style="color:#d3d4d6;margin: 5px 0 55px;letter-spacing:5px;">请使用您本人的账号密码登录</div>
                </div>
                <el-form :model="model" ref="model" id="formLogin" @submit.native.prevent>
                    <el-form-item prop="account" :rules="{required: true, message: '登录账号不能为空', trigger: 'blur'}">
                        <el-input v-model="model.account" placeholder="请输入用户名" prefix-icon="el-icon-user" @keyup.enter.native="submitForm" autocomplete="on"></el-input>
                    </el-form-item>

                    <el-form-item prop="password" :rules="{required: true, message: '密码不能为空', trigger: 'blur'}">
                        <el-input v-model="model.password" placeholder="请输入密码" show-password
                                  prefix-icon="el-icon-lock" @keyup.enter.native="submitForm" autocomplete="on"></el-input>
                    </el-form-item>


                    <el-form-item class="btn_login">
                        <el-button type="primary" icon="el-icon-user-solid" @click="submitForm">登 &nbsp; 录</el-button>
                    </el-form-item>
                    <div style="margin:0;">初始账号/密码：autocode/a123456</div>
                </el-form>
            </div>

            <div class="swipe-item" :key="1" :class="{'slide-organ':activeIndex === 0}">
                <div style="font-size: 20pt;font-weight: bolder;color:#5e5e5e ;letter-spacing:3px;line-height: 35px;">选择要登录的组织</div>
                <div style="color:#d3d4d6;margin: 5px 0 5px;letter-spacing:2px;font-size: 14px;">您有访问以下组织的权限</div>

                <div>
                    <div  v-for="(item, index) in orgList" style="min-height: 48px;margin-top: 20px;background: #f2f2f6;border-radius: 8px;padding:0 10px;font-size: 14px;cursor: pointer;" class="flex" @click="loginOrgan(item.code)">
                        <div class="flex" style="cursor: pointer;">
                            <i class="el-icon-user-solid" style="font-size: 24px;color:#5e9ed6;"></i>
                            <div style="margin-left: 10px;cursor: pointer;">{{item.label}}</div>
                        </div>
                        <div style="color:rgb(0,156,222);font-size: 12px;">
                            <template v-if="item.code==lastLoginOrg">上次访问</template>
                            <template v-else><i class="el-icon-right" style="color: #5e5e5e;font-size: 16px;"></i></template>
                        </div>
                    </div>
                    <div style="margin-top: 10px;text-align: right;padding-right: 10px;" >
                        <el-button type="text" icon="el-icon-back" @click="activeIndex = 0;">返 回</el-button>
                    </div>
                </div>

            </div>
        </div>

    </div>



</div>
</body>


<script>
   var vu = new Vue({
        el: '#app',
        data: function () {
            return {
                randCodeImage: '',
                model: {
                    username: '',
                    password: ''
                },
                activeIndex: 0,
                orgList:[],
                lastLoginOrg:''
            }
        },
        methods: {
            submitForm: function () {

                let that = this;
                this.$refs.model.validate(function (valid) {
                    if (valid) {
                        HttpApi.login(that.model,function(res){
                            if(res.code===1){
                                window.open("/platform/main","_self");
                            }else if(res.code===2){
                                that.activeIndex = 1;
                                that.lastLoginOrg = res.lastLoginOrg;
                                that.orgList = res.orgList;
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm:function(formName) {
                this.$refs.model.resetFields();
            },
            loginOrgan:function(orgCode){
                HttpApi.post("/platform/loginOrgan/"+orgCode,{},function(res){
                    window.open("/platform/main","_self");
                })
            }
        },
        mounted: function () {

        }
    });

</script>

</html>
